body {
  margin: 0;
  background-color: #f5f5f5;
}

/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

/**
 * 这组样式定义了进入和离开过渡的初始状态，
 * 用于实现一个淡入滑动的效果。
 * 
 * @section 进入过渡的起始状态
 */
 .fade-slide-enter-from {
  transform: translateX(-30px); /* 将元素初始位置向左移动30px，准备进入视口 */
  opacity: 0; /* 初始透明度为0，元素不可见 */
}

/**
 * @section 离开过渡的结束状态
 */
.fade-slide-leave-to {
  transform: translateX(30px); /* 将元素最终位置向右移动30px，准备离开视口 */
  opacity: 0; /* 最终透明度为0，元素完全不可见 */
}